<template>
  <!-- <Button @click="scrollToBottom">
点击
  </Button> -->
  <div class="content_box" @scroll="onarrive" ref="container">
    <div v-for="(item,index) in chatData">
      <span :class="judge(item.sendId)?'name-span-right':'name-span-left'">
        <Tag :class="judge(item.sendId)?'tag-right':'tag-left'" color=" #b5b0b0" text-color="#e4e4e4;">
          {{ item.nickname }}</Tag></span>
      <div v-if="item.messageType===1" :class="judge(item.sendId) ? 'userbox' : 'userbox2'">
        
        <div :class="judge(item.sendId) ? 'nameInfo' : 'nameInfo2'">
          <div :class="judge(item.sendId) ? 'contentText' : 'contentText2'" @click="onReceiveVoice(item.voice,index)">
            <Icon size="0.35rem" name="volume" :color="index===currentIndex?'#70bded':'#686868'" />
            {{ item.duration }}s
          </div>
          <img :src="prefix+item.iconUrl" class="avatar-icon" />
        </div>
      </div>
      <div v-else :class="judge(item.sendId) ? 'userbox' : 'userbox2'">
        <div :class="judge(item.sendId) ? 'nameInfo' : 'nameInfo2'">
          <div :class="judge(item.sendId) ? 'contentText' : 'contentText2'">{{ item.message }}</div>
          <img :src="prefix+item.iconUrl" class="avatar-icon" />
        </div>
      </div>
    </div>
    <div id="bottom" style="width: 100%px;height: 18px;"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, nextTick, onActivated, watch } from 'vue';
import { getOssPrefix } from '@/v-api/properties';
import { Local } from '@/utils/storage';
import { Button, Icon,Tag } from 'vant';

const prefix = getOssPrefix();
const userId = Local.get('userInfo').userId;
const timeMsg = ref('');
const emit = defineEmits(['arrive']);
const currentIndex = ref(null);
let audio = null;
let audioUrl = null;
const props = defineProps({
  chatData: {
    type: Array,
    required: true,
  },
});

const onReceiveVoice = (base64data, index) => {
  if (index === currentIndex.value) {
    audio.pause();
    URL.revokeObjectURL(audioUrl);
    currentIndex.value = null;
    return;
  }
  if (audio) {
    audio.pause();
    URL.revokeObjectURL(audioUrl);
    audioUrl = null;
  }
  const mimeType = 'audio/mp3'; // 根据你的音频文件类型设置正确的MIME类型
  const blob = base64ToBlob(base64data, mimeType);
  audioUrl = URL.createObjectURL(blob);
  audio = new Audio(audioUrl);
  audio.onloadedmetadata = () => {
    timeMsg.value = ` ${audio.duration.toFixed(1)}s`;
  };
  audio.play();
  currentIndex.value = index;
  audio.onended = () => {
    URL.revokeObjectURL(audioUrl);
    console.log('Audio playback finished, URL revoked.');
    currentIndex.value = null;
  };
};
const base64ToBlob = (base64, mimeType) => {
  const byteCharacters = atob(base64);
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  return new Blob([byteArray], { type: mimeType });
};
const onarrive = (e) => {
  if (e.target.scrollTop === 0) {
    emit('arrive');
  }
};
const judge = (sendId) => {
  return sendId === userId;
};
onMounted(() => {
  scrollToBottom();
});
const scrollToBottom = () => {
  nextTick(() => {
    document.getElementById('bottom').scrollIntoView({ behavior: "smooth", block: 'end' });
  });
};
defineExpose({
  scrollToBottom,
});
</script>

<style scoped >
.avatar-icon {
  width: 35px;
  height: 35px;
  border-radius: 20%;
}


.name-span-right {
  font-size: 12px;
  color: #686868;
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 2px;
}

.name-span-left {
  font-size: 12px;
  color: #686868;
  display: flex;
  margin-bottom: 2px;
  
}
.tag-right{
  margin-right: -4px;
}
.tag-left{
  margin-left: -4.8px;
}
.bottom {
  min-height: 50px;
  width: 100%;
  border-top: 1px solid #70bded;
  position: fixed;
  bottom: 0;
  color: #686868
}

.content_box {
  height: calc(100vh - 90px);
  overflow: auto;
  padding: 10px;
  touch-action: pan-y;
}

.timer {
  text-align: center;
  color: #c2c2c2;
}

.userbox {
  width: 100%;
  display: flex;
  margin-bottom: 12px;
  height: auto;
}

.content_box::-webkit-scrollbar {
  display: none;
}

.nameInfo {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  align-items: center;
  justify-content: flex-end;
  margin-right: -15.8px;
  padding-bottom: 3px;
}


.contentText {
  margin-right: 3.8px;
  background-color: #9eea6a;
  display: flex;
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  min-height: 22px;
  max-width: 71.7%;
  padding: 5px 10px;
  white-space: normal;
  word-break: break-all;
  font-size: 14.2px;
  text-align: left;
  align-content: center;
}



.userbox2 {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 12px;
}

.nameInfo2 {
  flex: 1;
  margin-right: 8px;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  align-items: center;
  justify-content: flex-end;
  margin-left: -5px;
  padding-bottom: 3px;
}

.contentText2 {
  margin-left: -7px;
  background-color: #e6e6e6;
  display: flex;
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  min-height: 22px;
  max-width: 76%;
  padding: 5px 10px;
  white-space: normal;
  word-break: break-all;
  font-size: 14.2px;
  align-self: center;
}
</style>
